<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- Handling Events -->
    <!-- 行内事件处理器 -->
    <!-- P5.41 P5.42 -->

    <p>onblur onfocus</p>
    <form action="">
        <input type="text" name="" id="" onfocus="handleOnFocus();" onblur="handleOnBlur();">
    </form>
    <script>
        function handleOnFocus() {
            console.log('onfocus. ' + new Date());
        }
        function handleOnBlur() {
            console.log('onblur. ' + new Date());
        }
    </script>
    <hr>

    <p>onchange oninput</p>
    <form action="">
        <input type="text" name="" id="" onchange="handleOnChange();" oninput="handleOnInput(this);">
    </form>
    <script>
        function handleOnChange() {
            console.log('onchange. ' + new Date());
        }
        function handleOnInput(element) {
            console.log('oninput. ' + new Date() + ' ' + element.value);
        }
    </script>
    <hr>

    <p>onclick ondblclick</p>
    <form action="">
        <input type="button" name="" id="" onclick="handleOnClick();" ondblclick="handleOnDblClick();"
            style="min-width: 100px;">
    </form>
    <script>
        function handleOnClick() {
            console.log('onclick. ' + new Date());
        }
        function handleOnDblClick() {
            console.log('ondblclick. ' + new Date());
        }
    </script>
    <hr>

    <p>onmousemove onmousedown onmouseup</p>
    <form action="">
        <textarea name="" id="" cols="30" rows="10" onmousemove="handleOnMouseMove();"
            onmousedown="handleOnMouseDown();" onmouseup="handleOnMouseUp();"></textarea>
    </form>
    <script>
        function handleOnMouseMove() {
            console.log('onmousemove. ' + new Date());
        }
        function handleOnMouseDown() {
            console.log('onmousedown. ' + new Date());
        }
        function handleOnMouseUp() {
            console.log('onmouseup. ' + new Date());
        }
    </script>
    <p>mounceover onmouseenter</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Element/mouseenter_event -->
    <p>mouseenter 不会冒泡（bubble），也就是说当指针从它的子层物理空间移到它的物理空间上时不会触发</p>
    <p>mouseout mouseleave </p>
    <p>mouseleave 不会冒泡而mouseout 会冒泡。这意味着当指针离开元素及其所有后代时，会触发mouseleave，而当指针离开元素或离开元素的后代（即使指针仍在元素内）时，会触发mouseout。</p>
    <div style="padding: 10%; background-color: red; width: 40%;">
        <div style="padding: 10%; background-color: green;" onmouseover="handleOnMouseOver();"
            onmouseenter="handleOnMouseEnter();" onmouseout="handleOnMouseOut();" onmouseleave="handleOnMouseLeave();">
            从当前元素及其子元素上测试与冒泡相关的事件
            <div style="padding: 10%; background-color: blue;">
                <div style="padding: 10%; background-color: orange;">
                </div>
            </div>
        </div>
    </div>
    <script>
        function handleOnMouseEnter() {
            console.log('onmouseenter. ' + new Date());
        }
        function handleOnMouseOver() {
            console.log('onmouseover. ' + new Date());
        }
        function handleOnMouseLeave() {
            console.log('onmouseleave. ' + new Date());
        }
        function handleOnMouseOut() {
            console.log('onmouseout. ' + new Date());
        }
    </script>
    <hr>

    <p>onselect</p>
    <form action="">
        <textarea name="" id="" cols="30" rows="10" onselect="handleOnSelect();">HelloWorld</textarea>
    </form>
    <script>
        function handleOnSelect() {
            console.log('onselect');
        }
    </script>
    <hr>

    <p>onload onunload</p>
    <p>load和unload事件，要从资源的加载中查看。例如通过切换iframe的src标签来验证。由于图片无法在内部监听，所以无法真正验证当前事件。</p>
    <div id="test_container">
        <p>通过图片的形式展示load和unload事件。注：unload在这里无法运行。</p>
        <button onclick="loadImg();">load img</button>
        <button onclick="unloadImg();">unload img</button>
        <button onclick="loadImgError();">load img error</button>
    </div>
    <div>
        <img id="test_img" alt="" onload="handleOnLoad(this);" onunload="handleOnUnLoad(this);"
            onerror="handleOnError(this);">
    </div>
    <script>
        var img = document.getElementById('test_img');

        // 创建触发事件的按钮的事件处理函数
        function loadImg() {
            // img.src = 'https://img2.baidu.com/it/u=2665557942,1268681751&fm=15&fmt=auto';
            img.setAttribute('src', 'https://img2.baidu.com/it/u=2665557942,1268681751&fm=15&fmt=auto');
        }
        function unloadImg() {
            img.removeAttribute('src');
        }
        function loadImgError() {
            // img.src = 'https://www.abc.com/a.jpg';
            img.setAttribute('src', 'https://www.abc.com/a.jpg');
        }

        // 创建对应事件的事件处理函数
        function handleOnLoad(element) {
            console.log('onload. element is ' + element);
        }

        function handleOnUnLoad(element) {
            console.log('onunload. element is ' + element);
        }
        function handleOnError(element) {
            console.log('onerror. element is ' + element);
        }
    </script>
    <div>
        <p>通过iframe展示load和unload事件。注：这里将事件处理程序放到了js代码中进行配置。</p>
        <button onclick="loadIframe();">load iframe</button>
        <button onclick="unloadIframe();">unload iframe</button>
        <button onclick="loadIframeError();">load iframe error</button>
    </div>
    <div>
        <iframe id="test_iframe" frameborder="0" style="width: 100%;"></iframe>
    </div>
    <script>
        var iframe = document.getElementById('test_iframe');

        // 创建触发事件的按钮的事件处理函数
        function loadIframe() {
            var src = 'test_iframe.html';
            iframe.src = src;
        }
        function unloadIframe() {
            iframe.removeAttribute('src');
        }
        function loadIframeError() {
            // iframe.src = 'https://www.abc.com';
            iframe.setAttribute('src', 'https://www.abc.com/a.jpg');
        }

        // 创建对应事件的事件处理函数
        function handleOnLoad2(element) {
            console.log('onload. element is ' + element);
        }
        function handleOnUnLoad2(element) {
            console.log('onunload. element is ' + element);
        }
        function handleOnError2(element) {
            console.log('onerror. element is ' + element);
        }
        iframe.onload = handleOnLoad2;
        iframe.onunload = handleOnUnLoad2;
        iframe.onerror = handleOnError2;
    </script>

    <p>onerror</p>

</body>

</html>

<!-- 事件介绍 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Building_blocks/Events -->
<!-- 事件是您在编程时系统内发生的动作或者发生的事情，系统响应事件后，如果需要，您可以某种方式对事件做出回应。例如：如果用户在网页上单击一个按钮，您可能想通过显示一个信息框来响应这个动作。 -->
<!-- 事件参考 -->
<!-- https://developer.mozilla.org/zh-CN/docs/Web/Events -->
<!-- 发送DOM事件是为了将发生的相关事情通知代码。每个事件都是继承自Event 接口的对象，可以包括自定义的成员属性及函数用于获取事件发生时相关的更多信息。事件可以表示任何从基本的用户交互、到发生在渲染模型自动通知的任何事情。 -->
<!-- 注：从上面链接查询事件列表 -->


<!-- 使用网页事件的方式 -->

<!-- 事件处理器属性 -->
<!-- 一些事件非常通用，几乎在任何地方都可以用（比如 onclick 几乎可以用在几乎每一个元素上），然而另一些元素就只能在特定场景下使用，比如我们只能在 video 元素上使用 onplay 。 -->

<!-- 行内事件处理器 - 请勿使用 -->
<!-- 在Web上注册事件处理程序的最早方法是类似于上面所示的事件处理程序HTML属性(也称为内联事件处理程序)—属性值实际上是当事件发生时要运行的JavaScript代码。 -->
<!-- 使用一个事件处理属性似乎看起来很简单，如果你只是在做一些非常快的事情，但很快就变得难以管理和效率低下。 -->

<!-- addEventListener() 和removeEventListener() -->
<!-- 新的事件触发机制被定义在 Document Object Model (DOM) Level 2 Events Specification, 这个细则给浏览器提供了一个函数 — addEventListener()。这个函数和事件处理属性是类似的，但是语法略有不同。 -->